<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-入口函数</title>
    <!--引入官方js框架jquery-3.3.1.min.js-->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //1.jquery版本的入口函数(dom文档加载完成之后执行该函数代码)
        $(function () {
            //给b1按钮添加单击事件
            //即给元素绑定click方法，参数传递匿名函数对象，并定义事件响应
            $("#b1").click(function () {
                alert("b1按钮被点击")
            });
        });

        /*2.js版本的入口函数
        window.onload=function () {
            //给b1按钮添加单击事件
            //即给元素绑定click方法，参数传递匿名函数对象，并定义事件响应
            $("#b1").click(function () {
                alert("b1按钮被点击")
            });
        }
        */

        /*window.onload和$(function)区别
          1.window.onload:
              该入口函数只能定义一次，定义多次则后面覆盖前面
              如window.onload=function(){alert("a")};
                window.onload=function(){alert("b")};
                最后弹框只会弹出b
          2.$(function):
              该入口函数可以定义多次，不覆盖
              如$(function(){alert("a")});
                $(function(){alert("b")});
                最后弹框先弹出a后弹出b
        *
        * */

        //3.jquery中元素样式管理
        //将id为div1的元素背景设置为red
        $(function () {
            $("#div1").css("backgroundColor","red");
        })


    </script>
</head>
<body>
    <div id="div1">标签体为div1...</div>
    <div id="div2">标签体为div2...</div>
    <input type="button" value="按钮" id="b1">

</body>
</html>